<!DOCTYPE html>
<html  lang=zh>
  <head>
    <meta charset="utf-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#000000" />
    <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
    <meta http-equiv="window-target" content="_top" />
  
    
    <title>知乎问答网站仿写(实战调用API接口) | Xowen Blog</title>
    <meta name="description" content="知乎问答平台开发这个暑假在经历了学校工作室的培训后，考核项目出来了就是根据工作室写的API接口完成知乎问答平台的开发。 功能要求如下:  用户登录注册功能 用户个人界面功能（包含动态、提问、回答等） 用户个人信息管理功能 问题提问功能 问题回答（包含二级评论等） 问题管理功能（用户关注问题，删除问题，修改问题等）  整体项目可以说应该不难，但是工作室要求采用原生js，禁止用任何框架写… 于是就开始">
<meta property="og:type" content="article">
<meta property="og:title" content="知乎问答网站仿写(实战调用API接口)">
<meta property="og:url" content="https://xowen.cn/2020/08/11/%E7%9F%A5%E4%B9%8E%E9%97%AE%E7%AD%94%E7%BD%91%E7%AB%99%E4%BB%BF%E5%86%99-%E8%B0%83%E7%94%A8API%E6%8E%A5%E5%8F%A3/index.html">
<meta property="og:site_name" content="xowen">
<meta property="og:description" content="知乎问答平台开发这个暑假在经历了学校工作室的培训后，考核项目出来了就是根据工作室写的API接口完成知乎问答平台的开发。 功能要求如下:  用户登录注册功能 用户个人界面功能（包含动态、提问、回答等） 用户个人信息管理功能 问题提问功能 问题回答（包含二级评论等） 问题管理功能（用户关注问题，删除问题，修改问题等）  整体项目可以说应该不难，但是工作室要求采用原生js，禁止用任何框架写… 于是就开始">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2020/08/11/aOUexJ.png">
<meta property="article:published_time" content="2020-08-11T09:43:34.000Z">
<meta property="article:modified_time" content="2020-08-11T11:26:15.522Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="js">
<meta property="article:tag" content="ajax">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2020/08/11/aOUexJ.png">
    <!-- Canonical links -->
    <link rel="canonical" href="https://xowen.cn/2020/08/11/%E7%9F%A5%E4%B9%8E%E9%97%AE%E7%AD%94%E7%BD%91%E7%AB%99%E4%BB%BF%E5%86%99-%E8%B0%83%E7%94%A8API%E6%8E%A5%E5%8F%A3/index.html">
   
    
<link rel="stylesheet" href="/css/bootstrap.css">


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    
<link rel="stylesheet" href="/css/mainstyle.css">

    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.1/styles/atom-one-dark-reasonable.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="/images/bitbug_favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1798605_rglfsa36dt.css">
    <script type="module" src="https://cdn.bootcdn.net/ajax/libs/instant.page/3.0.0/instantpage.min.js"></script>
    
    <script>
      (function(){
          var bp = document.createElement('script');
          var curProtocol = window.location.protocol.split(':')[0];
          if (curProtocol === 'https') {
              bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
          }
          else {
              bp.src = 'http://push.zhanzhang.baidu.com/push.js';
          }
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(bp, s);
      })();
      </script>
      
  <meta name="generator" content="Hexo 4.2.0"></head>
<body class="myBody">
      <!-- header -->
  <div class="container-fluid ani-box x-nav" style=" box-shadow: 0 5px 15px 0 rgb(0 0 0 / 15%);">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">Xowen</a>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/">首页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                分类
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/nexo%E5%BC%80%E5%8F%91/">nexo开发</a><span class="category-list-count">11</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/">学习日记</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/">技术分享</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%94%9F%E6%B4%BB%E6%97%A5%E5%BF%97/">生活日志</a><span class="category-list-count">3</span></li></ul>
                <!-- <div class="dropdown-divider"></div> -->
                <!-- <a class="dropdown-item" href="#">Something else here</a> -->
              </div>
            </li>
            
              <li class="nav-item">
                <a class="nav-link" href="/archives">Xowen's 归档</a>
              </li>
            
              <li class="nav-item">
                <a class="nav-link" href="/message">留言板</a>
              </li>
            
              <li class="nav-item">
                <a class="nav-link" href="/about">关于Xowen</a>
              </li>
            
          
          </ul>
          <ul class="nav justify-content-end right-links">
            
              <li class="nav-item">
                <i class="iconfont icon-QQ"></i>
                <a class="nav-user" href="tencent://QQInterLive/?Cmd=2&Uin=1941352853" target="_blank">QQ</a>
              </li>
            
              <li class="nav-item">
                <i class="iconfont icon-git"></i>
                <a class="nav-user" href="https://github.com/DriverOwen/DriverOwen.github.io" target="_blank">GitHub</a>
              </li>
            
            <li class="nav-item" >
              <div class="checkbox">
                <input type="checkbox" data-toggle="tooltip" data-placement="right" title="打开看板娘!"  id="live2dButton">
                <label></label>
              </div>
            </li>
            
          </ul>
        </div>
        <a class="navbar-brand" href="#"></a>
      </nav>
    </div>
  </div>
  <div class="container x-padding ani-box cover-container">
    <div class="xowen-cover-wrapper">
      <div class="xowen-cover" >

      </div>
    </div>
    <div class="row x-top-info">
      <div class="col-md-7">
        <div class="xowen-info">
          <div class="xowen-user">
            <a class="top-avatar" href="javascript:;"><img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="Xowen"></a>
            <div class="xowen-texts">
              <p class="top-title x-no"><a href="javascript:;">Good good study, and day day up.</a></p>
              <p class="top-text x-no"><a target="_blank" href="https://xowen.cn">睡觉是最大的爱好</a></p>
            </div>
          </div>

        </div>
      </div>
      <div class="col-md-5">
        <div class="x-num-info">
          <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
          <div class="x-stats" id="busuanzi_container_site_pv">
            <p class="x-stats-title x-no" id="busuanzi_value_site_pv">loading...</p>
            <p class="x-stats-text x-no " id="">VISITS</p>
          </div>
          <div class="x-stats">
            <p class="x-stats-title x-no" id="SURVIVA">loadings...</p>
            <p class="x-stats-text x-no">SURVIVA</p>
            <script>
              var now = new Date();
              (function createtime() {
                  var grt= new Date("5/10/2020 13:14:21");
                  now.setTime(now.getTime()+250);
                  days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
                 
                  document.getElementById("SURVIVA").innerHTML = dnum+" Days";
              })()
        
          </script>
          </div>
          <div class="x-stats">
            
            <p class="x-stats-title x-no">30</p>
            <p class="x-stats-text x-no">POSTS</p>
          </div>
          <div class="x-stats">
            <p class="x-stats-title x-no">24.1k</p>
            <p class="x-stats-text x-no">WORDS</p>
          </div>
        </div>
      </div>
    </div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
     
       首页 / 2020 / 08 / 11 / 知乎问答网站仿写-调用API接口 / 
     
      </ol>
    </nav>
  </div>
 
    <div class="container x-main-content ani-box">
      <div class="row">
    <div class="col-md-3 x-side-box">
    <div class="card" style="width: auto;">
      <img class="card-img-top" src="https://s1.ax1x.com/2020/05/10/Y1WAjU.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">公告</h5>
        <p class="card-text" style="text-align: justify;">大家好，我是xowen，欢迎访问我的博客！ </p>
      </div>
    </div>

   
    
      <div class="card" style="width: auto;">
  <div class="card-body">
    <h5 class="card-title">分类</h5>
    <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/nexo%E5%BC%80%E5%8F%91/">nexo开发</a><span class="category-list-count">11</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/">学习日记</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/">技术分享</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%94%9F%E6%B4%BB%E6%97%A5%E5%BF%97/">生活日志</a><span class="category-list-count">3</span></li></ul>
  </div>
</div>
    
      <div class="card" style="width: auto;">
  <div class="card-body">
    <h5 class="card-title">最新文章</h5>
    <ul class="list-group list-group-flush">
      
    
      <li class="list-group-item">
        <img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="" class="x-article-cover-img">
          <div class="hot-article">
            <a href="/2021/03/21/2021-3-20-python%E6%B8%A9%E4%B9%A0%E5%92%8C%E6%B3%A8%E6%84%8F%E7%82%B9/">2021-3-20-python温习和注意点...</a>
            <p class="hot-article-stats x-no">共 860 字</p>
          </div>
      </li>
      
    
      <li class="list-group-item">
        <img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="" class="x-article-cover-img">
          <div class="hot-article">
            <a href="/2021/03/21/2021-3-20-blog%E6%9B%B4%E6%96%B0-%E9%B8%BD%E4%BA%86%E5%B0%86%E8%BF%91%E5%8D%8A%E5%B9%B4%E4%BA%86/">2021.3.20 blog更新 鸽了将近半年了...</a>
            <p class="hot-article-stats x-no">共 91 字</p>
          </div>
      </li>
      
    
      <li class="list-group-item">
        <img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="" class="x-article-cover-img">
          <div class="hot-article">
            <a href="/2020/09/05/Chrome%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B7%A8%E5%9F%9Fcookie%E6%97%A0%E6%B3%95%E6%90%BA%E5%B8%A6/">Chrome浏览器跨域cookie无法携带...</a>
            <p class="hot-article-stats x-no">共 759 字</p>
          </div>
      </li>
      
    
      <li class="list-group-item">
        <img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="" class="x-article-cover-img">
          <div class="hot-article">
            <a href="/2020/08/27/%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0js-generator%E5%87%BD%E6%95%B0/">深入学习js-generator函数...</a>
            <p class="hot-article-stats x-no">共 1.2k 字</p>
          </div>
      </li>
      
    
      <li class="list-group-item">
        <img src="https://s1.ax1x.com/2020/05/09/YlOkAf.jpg" alt="" class="x-article-cover-img">
          <div class="hot-article">
            <a href="/2020/08/25/%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0js-%E6%89%8B%E5%86%99promise%E6%BA%90%E7%A0%81/">深入学习js--手写promise源码...</a>
            <p class="hot-article-stats x-no">共 928 字</p>
          </div>
      </li>
      
    </ul>
  </div>
</div>
    
      
  <div class="card" style="width: auto;margin-bottom: 10px;">
    <div class="card-body">
      <h5 class="card-title">标签云</h5>
      <ul class="list-groups list-group-flush">
        <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/asyn/" style="font-size: 10px;">asyn</a> <a href="/tags/bootstrap/" style="font-size: 10px;">bootstrap</a> <a href="/tags/chrome/" style="font-size: 10px;">chrome</a> <a href="/tags/cookie/" style="font-size: 10px;">cookie</a> <a href="/tags/css3/" style="font-size: 13.33px;">css3</a> <a href="/tags/deno/" style="font-size: 10px;">deno</a> <a href="/tags/django/" style="font-size: 16.67px;">django</a> <a href="/tags/ejs/" style="font-size: 20px;">ejs</a> <a href="/tags/es6/" style="font-size: 15px;">es6</a> <a href="/tags/generator/" style="font-size: 10px;">generator</a> <a href="/tags/git/" style="font-size: 11.67px;">git</a> <a href="/tags/github/" style="font-size: 11.67px;">github</a> <a href="/tags/grid/" style="font-size: 10px;">grid</a> <a href="/tags/hexo/" style="font-size: 13.33px;">hexo</a> <a href="/tags/html/" style="font-size: 11.67px;">html</a> <a href="/tags/html5/" style="font-size: 10px;">html5</a> <a href="/tags/js/" style="font-size: 13.33px;">js</a> <a href="/tags/js%E6%8F%92%E4%BB%B6/" style="font-size: 10px;">js插件</a> <a href="/tags/live2d/" style="font-size: 10px;">live2d</a> <a href="/tags/nexo/" style="font-size: 18.33px;">nexo</a> <a href="/tags/node/" style="font-size: 10px;">node</a> <a href="/tags/opp/" style="font-size: 10px;">opp</a> <a href="/tags/promise/" style="font-size: 10px;">promise</a> <a href="/tags/proxy/" style="font-size: 10px;">proxy</a> <a href="/tags/python/" style="font-size: 10px;">python</a> <a href="/tags/vue/" style="font-size: 13.33px;">vue</a> <a href="/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/tags/%E4%BC%98%E5%8C%96/" style="font-size: 10px;">优化</a> <a href="/tags/%E5%AD%A6%E4%B9%A0/" style="font-size: 15px;">学习</a> <a href="/tags/%E5%B8%83%E5%B1%80/" style="font-size: 10px;">布局</a> <a href="/tags/%E6%B5%8B%E8%AF%95/" style="font-size: 10px;">测试</a> <a href="/tags/%E7%94%9F%E6%B4%BB/" style="font-size: 10px;">生活</a> <a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 10px;">跨域</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 10px;">转载</a>
      </ul>
    </div>
  </div>
  
    
      

<div class="card" style="width: auto;margin-bottom: 10px;">
  <div class="card-body">
    <h5 class="card-title">归档</h5>
    <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">2021-03</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">2020-09</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">2020-08</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">2020-07</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">2020-05</a><span class="archive-list-count">20</span></li></ul>
  </div>
</div>



    

  
   
    
  </div>
    
    
<div class="col-md-9 x-side-content">
    <div class="x-blog-info">
        <div class="x-blog-text">
            <p class="x-no x-blog-title">知乎问答网站仿写(实战调用API接口) 
            </p>
        </div>
        <div class="x-blog-meta">
            <div class="x-blog-date">
                <i class="iconfont icon-time1"></i>
                <span>2020-08-11 17:43:34 </span>
            </div>
            <div class="x-blog-views">
                <i class="iconfont icon-jianpan"></i>
                <span>字数: 2.6k</span>
            </div>
            <div id="/2020/08/11/%E7%9F%A5%E4%B9%8E%E9%97%AE%E7%AD%94%E7%BD%91%E7%AB%99%E4%BB%BF%E5%86%99-%E8%B0%83%E7%94%A8API%E6%8E%A5%E5%8F%A3/" data-flag-title="知乎问答网站仿写(实战调用API接口)" class="x-blog-comments leancloud-visitors">
                <i class="iconfont icon-view"></i>
               
                <span class="leancloud-visitors-count">loading...</span> <span>&nbsp;访问量</span>
            </div>
          
        </div>
    </div>
    <div class="container x-blog-content">
        <h3 id="知乎问答平台开发"><a href="#知乎问答平台开发" class="headerlink" title="知乎问答平台开发"></a>知乎问答平台开发</h3><p>这个暑假在经历了学校工作室的培训后，考核项目出来了就是根据工作室写的API接口完成知乎问答平台的开发。</p>
<p>功能要求如下:</p>
<ul>
<li>用户登录注册功能</li>
<li>用户个人界面功能（包含动态、提问、回答等）</li>
<li>用户个人信息管理功能</li>
<li>问题提问功能</li>
<li>问题回答（包含二级评论等）</li>
<li>问题管理功能（用户关注问题，删除问题，修改问题等）</li>
</ul>
<p>整体项目可以说应该不难，但是工作室要求采用原生js，禁止用任何框架写…</p>
<p>于是就开始了秃头之旅，好在工程量不大，花费了10天，完成了整个项目。</p>
<p>基本完成了上述功能，有一定的小瑕疵（写代码时没有考虑清楚，导致后面代码越写越冗余，但是基本上做了一些业务逻辑分离等）</p>
<p>此外项目整体使用了一些es6的语法，没有<code>webpack</code>,<code>babel</code>的支撑，代码兼容性很差，低版本的浏览器可能会出现各种问题，ie就更不用说了。（没有办法，技术不行，手写webpack不敢想）</p>
<h3 id="项目依赖"><a href="#项目依赖" class="headerlink" title="项目依赖"></a>项目依赖</h3><p>后端：是node加monogodb搭建的。</p>
<p>整个项目用到的工具有:</p>
<ul>
<li>postman （用于api测试调用，以便不用写代码去调用接口）</li>
<li>Navicat  (用于链接数据库，对数据库内容进行一些修改)</li>
<li>webstorm (项目主力编辑器，很好用)</li>
<li>vscode  (用于一些其它代码编写，比如有些时候用不着开webstorm，用vscode方便一些)</li>
<li>git  (代码仓库，管理自己的代码)</li>
<li>trello  (项目管理，日程提醒这些)</li>
</ul>
<h3 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h3><figure class="highlight gherkin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br></pre></td><td class="code"><pre><code class="hljs gherkin">\---src<br>    |<span class="hljs-string">   edit.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   home.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   index.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   template.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   test.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   user.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span><br><span class="hljs-string">    +---css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       edit-page.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       edit-page.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       edit-page.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       home-page.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       home-page.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       home-page.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       login-page.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       login-page.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       login-page.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       normalize.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       public.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       public.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       public.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       question-page.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       question-page.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       question-page.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       user-page.css</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       user-page.css.map</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       user-page.less</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    +---images</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   default_user.jpg</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   favicon.ico</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   zhihu.jpg</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---home</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       cover.jpg</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---login</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       hd_logo.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       identify.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       notice.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       phone.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       qrcode.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       sign_bg.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   \---other</span><br><span class="hljs-string">    </span>|<span class="hljs-string">           ok.png</span><br><span class="hljs-string">    </span>|<span class="hljs-string">           </span><br><span class="hljs-string">    +---js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   liker.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   public.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   questionCard.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---answer</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       getAnswers.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       putAns.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---comment</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   getComment.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   putComment.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">   \---template</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">           comment.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">           </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---edit</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       domEvent.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---home</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       domEvent.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---login</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       domEvent.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       login.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       signUp.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---question</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       loadQuestions.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       putQuestion.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   +---search</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       getSearchRes.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">   </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    </span>|<span class="hljs-string">   \---user</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   deleteQuestion.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   domEvent.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   dynamic.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   getInfo.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   updateQuestion.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   upfile.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   userCollect.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span>|<span class="hljs-string">   </span><br><span class="hljs-string">    </span>|<span class="hljs-string">       \---template</span><br><span class="hljs-string">    </span>|<span class="hljs-string">           \---dynamic</span><br><span class="hljs-string">    </span>|<span class="hljs-string">                   collecting.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">                   likingAns.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">                   noDynamic.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">                   question.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">                   </span><br><span class="hljs-string">    +---page</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       success.html</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    +---template</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       header.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       modal.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       noQuestion.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       question.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       questionCard.js</span><br><span class="hljs-string">    </span>|<span class="hljs-string">       </span><br><span class="hljs-string">    \---utils</span><br><span class="hljs-string">            ajax.js</span><br><span class="hljs-string">            Cookie.js</span><br><span class="hljs-string">            public.js</span><br><span class="hljs-string">            Router.js</span><br><span class="hljs-string">            Verify.js</span><br></code></pre></td></tr></table></figure>


<h3 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h3><p>只展示了一些主要页面</p>
<p><img src="https://s1.ax1x.com/2020/08/11/aOWKL6.png" alt=""><br><img src="https://s1.ax1x.com/2020/08/11/aOUZ24.png" alt=""><br><img src="https://s1.ax1x.com/2020/08/11/aOUEPU.png" alt=""></p>
<h3 id="项目开发历程"><a href="#项目开发历程" class="headerlink" title="项目开发历程"></a>项目开发历程</h3><p>我是一个个分离业务然后再写代码的。<br>一开始先完成了用户登录界面，然后再去完善登录注册逻辑业务。</p>
<p>在写这些时，为了方便调用接口，自己简单用promise封装了一下ajax，后面业务需求又封装了一下cookie，但是用的都是es6的语法，没有webpack这些支撑，网页的兼容性很差，估计低一点的浏览器就不能跑了。</p>
<ul>
<li>ajax</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Ajax</span> </span>&#123;<br>  <span class="hljs-keyword">constructor</span>() &#123;<br>    <span class="hljs-keyword">this</span>.targetUrl = <span class="hljs-string">"http://localhost:8000"</span>;<br>  &#125;<br><br>  <span class="hljs-comment">// 封装ajax</span><br><br>  ajax(url,method,data,header,<span class="hljs-keyword">async</span>)&#123;<br>    <span class="hljs-keyword">let</span> xhr,<br>      result;<br>    <span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span>.XMLHttpRequest)&#123;<br>     xhr = <span class="hljs-keyword">new</span> XMLHttpRequest();<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>      xhr = <span class="hljs-keyword">new</span> ActiveXObject(<span class="hljs-string">'Microsoft.XMLHTTP'</span>);<br>    &#125;<br>    <span class="hljs-keyword">if</span>(!data) data = <span class="hljs-string">""</span>;<br>    <span class="hljs-keyword">if</span>(!<span class="hljs-keyword">async</span>) <span class="hljs-keyword">async</span> = <span class="hljs-literal">true</span><br>    <span class="hljs-keyword">if</span>(method === <span class="hljs-string">"get"</span>)&#123;<br>      xhr.open(<span class="hljs-string">'get'</span>, url , <span class="hljs-keyword">async</span>);<br>      xhr.setRequestHeader(header.name,<span class="hljs-string">"Bearer "</span> + header.value);<br>      xhr.send(<span class="hljs-literal">null</span>);<br>    &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(method === <span class="hljs-string">"post"</span>)&#123;<br>    <span class="hljs-comment">//post</span><br>    &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(method === <span class="hljs-string">"put"</span>)&#123;<br>     <span class="hljs-comment">//put</span><br>    &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(method === <span class="hljs-string">"delete"</span>)&#123;<br>      <span class="hljs-comment">//delete</span><br>    &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(method === <span class="hljs-string">"patch"</span>)&#123;<br>      <span class="hljs-comment">//patch</span><br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Ajax method is not found"</span>);<br>    &#125;<br><br>    <span class="hljs-comment">// promise 使其异步获取回调数据</span><br><br>    <span class="hljs-keyword">let</span> getData = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>      xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-keyword">let</span> result;<br>        <span class="hljs-keyword">if</span>(xhr.readyState  == <span class="hljs-number">4</span>)&#123;<br>          <span class="hljs-keyword">if</span>(xhr.status &gt;= <span class="hljs-number">200</span> || xhr &lt; <span class="hljs-number">300</span>)&#123;<br>            result = <span class="hljs-built_in">JSON</span>.parse(xhr.responseText);<br>            <span class="hljs-keyword">if</span>(result)&#123;<br>              resolve(result);<br>            &#125;<span class="hljs-keyword">else</span>&#123;<br>              reject(<span class="hljs-string">"err"</span>);<br>            &#125;<br>          &#125;<span class="hljs-keyword">else</span>&#123;<br>            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"请求失败"</span>);<br>            result = <span class="hljs-literal">false</span>;<br>            reject(result);<br>          &#125;<br>        &#125;<span class="hljs-keyword">else</span>&#123;<br>          <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"还在准备"</span>);<br>        &#125;<br>      &#125;<br>    &#125;)<br>    <span class="hljs-keyword">return</span> getData;<br>  &#125;<br><br>  <span class="hljs-comment">// post请求</span><br><br>  post(path,data,header,<span class="hljs-keyword">async</span>) &#123;<br>    <span class="hljs-keyword">if</span>(!path) path = <span class="hljs-string">""</span>;<br>    <span class="hljs-keyword">if</span>(!data) data = <span class="hljs-string">""</span>;<br>    <span class="hljs-keyword">if</span>(!header) header = &#123;&#125;;<br>    <span class="hljs-keyword">let</span> encodeData = <span class="hljs-keyword">this</span>.encodeFormData(data);<br>    <span class="hljs-keyword">let</span> url = <span class="hljs-keyword">this</span>.targetUrl + path;<br>    <span class="hljs-comment">//console.log(this.encodeFormData(data));</span><br>    <span class="hljs-keyword">let</span> receiveData = <span class="hljs-keyword">this</span>.ajax(url,<span class="hljs-string">"post"</span>,encodeData,header,<span class="hljs-keyword">async</span>);<br>    <span class="hljs-comment">//console.log(receiveData);</span><br>    <span class="hljs-keyword">return</span> receiveData;<br>  &#125;<br><br>  <span class="hljs-comment">// get请求</span><br><br>  <span class="hljs-keyword">get</span>(path,data,header,async) &#123;<br>   <span class="hljs-comment">//</span><br>  &#125;<br><br>  <span class="hljs-comment">// put请求</span><br><br>  put(path,data,header,<span class="hljs-keyword">async</span>) &#123;<br>   <span class="hljs-comment">//</span><br>  &#125;<br><br>  <span class="hljs-keyword">delete</span>(path,data,header,<span class="hljs-keyword">async</span>) &#123;<br>   <span class="hljs-comment">//</span><br>  &#125;<br><br>  patch(path,data,header,<span class="hljs-keyword">async</span>) &#123;<br>   <span class="hljs-comment">//</span><br>  &#125;<br><br>  <span class="hljs-comment">// 转换参数</span><br><br>  encodeFormData(data) &#123;<br>    <span class="hljs-keyword">let</span> pair = [];<br>    <span class="hljs-keyword">if</span>(<span class="hljs-built_in">Object</span>.prototype.toString.call(data) === <span class="hljs-string">'[object FormData]'</span>)&#123;<br>      <span class="hljs-keyword">return</span> data;<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>      <span class="hljs-keyword">if</span> (!data || <span class="hljs-built_in">Object</span>.prototype.toString.call(data) !== <span class="hljs-string">'[object Object]'</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">""</span>;<br>      <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> data) &#123;<br>        <span class="hljs-keyword">if</span> (!data.hasOwnProperty(key))<br>          <span class="hljs-keyword">continue</span>;<br>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> data[key] === <span class="hljs-string">"function"</span>) &#123;<br>          data[key] = data[key]();<br>        &#125;<br>        <span class="hljs-keyword">let</span> value = <span class="hljs-built_in">encodeURIComponent</span>(data[key].replace(<span class="hljs-string">"%20"</span>, <span class="hljs-string">"+"</span>));<br>        <span class="hljs-comment">// let value = encodeURIComponent(data[key]);</span><br>        pair.push(key + <span class="hljs-string">"="</span> + value);<br>      &#125;<br>      <span class="hljs-keyword">return</span> pair.join(<span class="hljs-string">"&amp;"</span>);<br>    &#125;<br>  &#125;<br>&#125;<br><span class="hljs-keyword">export</span> &#123;Ajax&#125;<br></code></pre></td></tr></table></figure>
<p>代码封装的很丑，一开始只有get,post，以及简单的header头，后面业务需要越写越复杂，然后添加功能也就很随意，又不想重写一下架构，就这样将就用了，因为是对接<code>API</code>写的，所以没有那么规范性，很多的兼容有没有考虑到</p>
<p>至于为什么<code>ajax</code>本身支持使用异步，为什么还使用了<code>promise</code>封装，是为了返回数据调用嘛，不然的话数据不好返回，又要用闭包这些，而且调用一次就要写一次发送代码，很麻烦，所以才简单封装了<code>ajax</code></p>
<p>在网络请求时，后端的一些接口需要提供数组，然而我测试了许就，网上各种方法也试过了，都没有成功，我在<code>postman</code>里面使用官方提示的方法发送数组请求，后台也不能接受到，所以有关一些传递数组的api功能我就砍掉了,比如用户信息管理里面的职业经历，教育经历，需要传递数组这些，我无法传递过去，就没有实现。</p>
<blockquote>
<p>在写patch方法时，查了很多资料，发现国内很少用原生js的patch方法使用案例。这里我遇见了一个坑就是 <code>open(&#39;patch&#39;)</code> 和 <code>open(&#39;PATCH&#39;)</code>是不一样的，我用后者才成功发送了<code>patch</code>请求，但是其它方法如<code>get</code>,<code>post</code>大小写又没有问题，而<code>patch</code>小写时，总是发出跨域警告。看了一些<code>api</code>后端的源码，也没有发现什么问题。查了很久…网上全是<code>jQuery</code>的<code>ajax</code>使用的博客文章，后面卡了很久，后面去<a href="https://developer.mozilla.org/en-US/" target="_blank" rel="noopener">MDN</a>看了<code>XMLHttpRequest</code>的API文档后，发现了他用了大写的patch发送，我才成功… 不得不说好坑</p>
</blockquote>
<ul>
<li><p>Cookie</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/* 定义cookie公共类 */</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cookie</span> </span>&#123;<br>  <span class="hljs-keyword">constructor</span>() &#123;<br><br>  &#125;<br>  setCookie(name,value,expireDays)&#123;<br>    <span class="hljs-keyword">if</span>(!name) <span class="hljs-keyword">return</span>;<br>    <span class="hljs-keyword">let</span> exDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br>    exDate.setTime(exDate.getTime() + expireDays * <span class="hljs-number">24</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>);<br>    <span class="hljs-keyword">let</span> expires = exDate.toGMTString();<br>    <span class="hljs-keyword">let</span> result = <span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">`<span class="hljs-subst">$&#123;name&#125;</span>=<span class="hljs-subst">$&#123;value&#125;</span>;expires=<span class="hljs-subst">$&#123;expires&#125;</span>`</span>;<br>    <span class="hljs-keyword">return</span> result;<br>  &#125;<br>  getCookie(name)&#123;<br>    <span class="hljs-keyword">if</span>(!name) <span class="hljs-keyword">return</span>;<br>    <span class="hljs-keyword">let</span> arr,<br>      reg = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"(^| )"</span>+ name +<span class="hljs-string">"=([^;]*)(;|$)"</span>);<br>    <span class="hljs-keyword">if</span>(arr = <span class="hljs-built_in">document</span>.cookie.match(reg)) <span class="hljs-keyword">return</span> <span class="hljs-built_in">unescape</span>(arr[<span class="hljs-number">2</span>]);<br>    <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>  &#125;<br>  delCookie(name)&#123;<br>    <span class="hljs-keyword">if</span>(!name) <span class="hljs-keyword">return</span>;<br>    <span class="hljs-keyword">let</span> exDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br>    exDate.setTime(exDate.getTime() - <span class="hljs-number">1</span>);<br>    <span class="hljs-keyword">let</span> expires = exDate.toGMTString();<br>    <span class="hljs-built_in">console</span>.log(expires);<br>    <span class="hljs-keyword">let</span> cval = <span class="hljs-keyword">this</span>.setCookie(name,<span class="hljs-string">""</span>,expires);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"del success"</span>,cval);<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">export</span> &#123;<br>  Cookie<br>&#125;<br></code></pre></td></tr></table></figure>
<p>Cookie没有什么问题，就是感觉我写的代码很丑，兼容估计也不怎么好，哈哈哈，完全是为了简单使用一些cookie而写的，所以功能也不怎么齐全。</p>
</li>
<li><p>其它<br>此外还写了一些功能函数或者类放在了<code>public.js</code> 如<code>diffTime</code>函数，很多地方都会使用，于是放进了里面，方便调用，不得不说<code>es6</code>的<code>import</code>和<code>export</code>真香啊。</p>
</li>
</ul>
<h3 id="谜之伪模板开发"><a href="#谜之伪模板开发" class="headerlink" title="谜之伪模板开发"></a>谜之伪模板开发</h3><p>项目开发中，前端页面有很多功能需要复用，如导航栏，右侧bar等，问题列表，问题card等，当然如果用框架，比如<code>vue</code>，那么一开始就可以直接封装成组件这些，但是没有办法，只能用原生js，于是我用<code>django</code>,<code>ejs</code>的模板思想，加上<code>es6</code>提供的字符串模板功能，简单抽离了一些复用代码，完成了一些模板，写的很丑，本来想用<code>ejs</code>那种语法特征，方便在模板里面写一些业务逻辑，后面自己偷懒，就做成了纯模板，业务逻辑在用<code>js</code>完成了后在把数据传入模板。</p>
<p>部分代码:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> &#123;diffTime&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">"../../../../utils/public.js"</span>;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">collecting</span>(<span class="hljs-params">date,title,q_id</span>) </span>&#123;<br>  <span class="hljs-keyword">let</span> template = <span class="hljs-string">`</span><br><span class="hljs-string">  &lt;div class="List-item"&gt;</span><br><span class="hljs-string">    &lt;div class="List-itemMeta"&gt;</span><br><span class="hljs-string">      &lt;div class="ActivityItem-meta"&gt;</span><br><span class="hljs-string">        &lt;span class="ActivityItem-metaTitle"&gt;</span><br><span class="hljs-string">          关注了问题</span><br><span class="hljs-string">        &lt;/span&gt;</span><br><span class="hljs-string">        &lt;span&gt;<span class="hljs-subst">$&#123;diffTime(date)&#125;</span>&lt;/span&gt;</span><br><span class="hljs-string">      &lt;/div&gt;</span><br><span class="hljs-string">    &lt;/div&gt;</span><br><span class="hljs-string">    &lt;div class="ContentItem AnswerItem"&gt;</span><br><span class="hljs-string">      &lt;h2 class="ContentItem-title"&gt;</span><br><span class="hljs-string">        &lt;a href="#/question/<span class="hljs-subst">$&#123;q_id&#125;</span>" style="color:inherit;"&gt;<span class="hljs-subst">$&#123;title&#125;</span>&lt;/a&gt;</span><br><span class="hljs-string">      &lt;/h2&gt;</span><br><span class="hljs-string">    &lt;/div&gt;</span><br><span class="hljs-string">  &lt;/div&gt;</span><br><span class="hljs-string">  `</span><br>  <span class="hljs-keyword">return</span> template<br>&#125;<br><span class="hljs-keyword">export</span> &#123;<br>  collecting<br>&#125;<br></code></pre></td></tr></table></figure>

<p>这里也有如何用<code>es6</code>字符串模板，实现<code>ejs</code>类似的模板功能的代码，大佬手写的。<br>效果如下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> template = <span class="hljs-string">`</span><br><span class="hljs-string">&lt;ul&gt;</span><br><span class="hljs-string">  &lt;% for(let i=0; i &lt; data.supplies.length; i++) &#123; %&gt;</span><br><span class="hljs-string">    &lt;li&gt;&lt;%= data.supplies[i] %&gt;&lt;/li&gt;</span><br><span class="hljs-string">  &lt;% &#125; %&gt;</span><br><span class="hljs-string">&lt;/ul&gt;</span><br><span class="hljs-string">`</span>;<br><br>...<br><br>echo(<span class="hljs-string">'&lt;ul&gt;'</span>);<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i &lt; data.supplies.length; i++) &#123;<br>  echo(<span class="hljs-string">'&lt;li&gt;'</span>);<br>  echo(data.supplies[i]);<br>  echo(<span class="hljs-string">'&lt;/li&gt;'</span>);<br>&#125;;<br>echo(<span class="hljs-string">'&lt;/ul&gt;'</span>);<br><br><span class="hljs-keyword">let</span> evalExpr = <span class="hljs-regexp">/&lt;%=(.+?)%&gt;/g</span>;<br><span class="hljs-keyword">let</span> expr = <span class="hljs-regexp">/&lt;%([\s\S]+?)%&gt;/g</span>;<br><br>template = template<br>  .replace(evalExpr, <span class="hljs-string">'`); \n  echo( $1 ); \n  echo(`'</span>)<br>  .replace(expr, <span class="hljs-string">'`); \n $1 \n  echo(`'</span>);<br><br>template = <span class="hljs-string">'echo(`'</span> + template + <span class="hljs-string">'`);'</span>;<br><br>...<br></code></pre></td></tr></table></figure>
<p><a href="https://es6.ruanyifeng.com/#docs/string#%E5%AE%9E%E4%BE%8B%EF%BC%9A%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91" target="_blank" rel="noopener">完整代码链接</a></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>怎么说呢，这个项目还是我第一次使用api去完成一些业务逻辑的项目，之前大大小小的项目基本上都是偏向前端样式，布局这样的练习，如仿写一些前端门户网站，自己写<code>blog</code>的主题。</p>
<p>js的使用基本上都是一些<code>dom</code>操作，而网络请求这些，以及具体的业务逻辑实现还没有写过。 这次项目也补缺了我一些<code>js</code>的方面的缺陷，也了解到了<code>js</code>的新的技术，也了解到了一些业务逻辑实现的合理方式。</p>
<p>由于自身经验不足，写的代码很丑，复用性也很差，还有很多冗余代码。</p>
<p>最致命的是 <code>Promise</code> 的链式调用，又活生生被我写成了套娃模式，一些网络请求封装性不好，导致请求的顺序有所混乱，当然这些也让我明白了自己的不足，去正视自己的错误。</p>
<p>整体来说，这次项目我对自己的表现并不满意，如果重新写的话，我相信我可以用更好的方法，更少的代码，更优雅的方式去完成这个项目，但是时间不够了，还有其它学习事项待我完成。这是一件遗憾的事情。</p>
<p>好在的是，这次项目我也有所收获，让我吸取这些教训，以便在后面的项目中少走一些弯路。</p>

    </div>
    <div class="pageLocate">
       <div class="col-md-6">
    
        
            
            <p><a href="/2020/08/22/vue响应式原理-Object-defineProperty-proxy/">上一章:&nbsp;<span>vue响应式原理...</span></a></p>
           
        
       </div>
       <div class="col-md-6" >
        
            
            <p style="text-align: right;"><a href="/2020/07/13/vue中methods方法不能使用箭头符号的原因/">下一章:&nbsp;<span>vue中meth...</span></a></p>
            
        
       </div>
    </div>
    <div class="x-blog-footer">
        
            <section id="comments" class="comments">
              <style>
                .comments{margin:30px;padding:10px;}
                @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
              </style>
              <div class="valine_comment"></div>
<!--载入js，在</body>之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  new Valine({
      el: '.valine_comment',
      app_id: 'kEVKhcTQTMzzN0RQplG6qnm1-gzGzoHsz',
      app_key: 'nLyVp65cwTByxpxImBDCLmaT',
      placeholder: '一起讨论吧',
      notify: 'true',
      verify: 'true',
      visitor: 'true',
    });
</script>
            </section>
          
    </div>
</div>



      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.1/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
      <!-- live2d model -->
      <div class="live2d-box">
  <canvas id="glcanvas" width="300" height="350">
                    
  </canvas>
  <div class="live2d-msg">
      <p class="live2d-info-text">
        君子阳阳，左执簧，右招我由房，其乐只且！
君子陶陶，左执翿，右招我由敖，其乐只且！
      </p>
    </div>  
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
</div>


  <script src="/js/live2d/lib/live2d.min.js"></script>

  <script src="/js/live2d/framework/Live2DFramework.js"></script>

  <script src="/js/live2d/utils/MatrixStack.js"></script>

  <script src="/js/live2d/utils/ModelSettingJson.js"></script>
  <script src="/js/live2d/PlatformManager.js"></script>
  <script src="/js/live2d/LAppDefine.js"></script>
  <script src="/js/live2d/LAppModel.js"></script>
  <script src="/js/live2d/LAppLive2DManager.js"></script>
  <script src="/js/live2d/SampleApp1.js"></script>
  <script>sampleApp1();</script>


 
    <!-- partial model -->
   
    <script src="/js/running.js"></script>
    <!-- footer  -->
    <!-- <div class="tools-search" data-toggle="modal" data-target="#myModal"> 
  <i class="iconfont x-no icon-search" ></i>
</div>

<div class="tools-music" data-toggle="modal" data-target="#wyymusic"> 
  <i class="iconfont x-no icon-ziyuanldpi" ></i>
</div> -->

<!-- bg -->


<!-- search -->
<div class="fixed-back ani-box">
  <i class="iconfont x-no icon-upa"></i>
</div>

<a href="/">
<div class="fixed-home ani-box">
  <i class="iconfont x-no icon-xuanzhongshangcheng"></i>
</div>
</a>

<div class="fixed-switch ani-box">
  <i class="iconfont x-no icon-kaiguan1"></i>
</div>
<div class="fixed-bg">

</div>
<div class="fixed-bg-cover ani-box" id="fixed_bg_cover">

</div>

<div class="container-fluid x-footer ani-box" >
    <p class="web-info x-no">
      Copyright © 2020 Xowen [www.xowen.cn] All Rights Reserved
    </p>
    <p class="web-info x-no">
      Power By<span> &nbsp;Xowen</span>
  
    </p>
    <p class="web-info x-no">
     
      部分图片引用自网络，如有侵权请联系我。
            
  
    </p>
  </div>
  
  <script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")",
                "font-size": "0.8rem"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script>    <!-- 鼠标跟随 -->
    <!-- <script>
      let myBody = document.querySelector('body');
      // console.log(myBody);
      document.onmouseover = (e)=> {
        
        myBody.style.transform = "translateY(30px)"
      } -->
    </script>
</body>

</html>